
<!DOCTYPE HTML>
<html>
 <head>
    
  <title>拖拽式表单设计器 Formbuild.leipi.org</title>
  <meta name="keyword" content="拖拽式表单设计器,Web Formbuilder,Formbuild,专业表单设计器,高级表单设计器,智能表单设计器,WEB表单设计器,web formdesign,formdesigner">
  <meta name="description" content="拖拽式表单设计器Formbuild是强大的在线WEB表单设计器，它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用，你可以在此基础上任意修改使功能无限强大！">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="leipi.org">
    <link href="Public/css/bootstrap/css/bootstrap.css?2024" rel="stylesheet" type="text/css" />
   
    <link href="Public/css/site.css?2024" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var _root='http://formbuild/index.php?s=/',_controller = 'index';
    </script>
    
<style>
      
      #components{
        min-height: 600px;
      }
      #target{
        min-height: 200px;
        border: 1px solid #ccc;
        padding: 5px;
      }
      #target .component{
        border: 1px solid #fff;
      }
      #temp{
        width: 500px;
        background: white;
        border: 1px dotted #ccc;
        border-radius: 10px;
      }

      .popover-content form {
        margin: 0 auto;
        width: 213px;
      }
      .popover-content form .btn{
        margin-right: 10px
      }
      #source{
        min-height: 500px;
      }
    </style>
    <!--link href="Public/css/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"-->


 </head>
<body>

<div class="container">
  <div class="row clearfix">
    <div class="span6">
      <div class="clearfix">
        <h2>我的表单</h2>
        <hr>
        <div id="build">
        <button onclick="submitFormInfo()" class="btn btn-default" style="margin-bottom: 10px;">提交</button>
        <!-- 表单代码 -->
          <form id="target" class="form-horizontal">
            <fieldset>
              <div id="legend" class="component" rel="popover" title="编辑属性" trigger="manual"
                data-content="
                <form class='form'>
                  <div class='controls'>
                    <label class='control-label'>表单名称</label> <input type='text' id='orgvalue' placeholder='请输入表单英文名称'>
                    <label class='control-label'>表单名称</label> <input type='text' id='orgname' placeholder='请输入表单中文名称'>
                    <hr/>
                    <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
                  </div>
                </form>"
                >
                <input type="hidden" name="form_name" value="" class="leipiplugins" leipiplugins="form_name"/>
                <legend class="leipiplugins-orgvalue">点击填写表单名</legend>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>

    <div class="span6">
        <h2>拖拽下面的控件到左侧</h2>
        <hr>
      <div class="tabbable">
        <ul class="nav nav-tabs" id="navtab">
          <li class="active"><a href="#1" data-toggle="tab">常用控件</a></li>
          <li class><a href="#2" data-toggle="tab">定制控件</a></li> 
         <li class><a id="sourcetab" href="#5" data-toggle="tab">源代码</a></li>
        </ul>
        <form class="form-horizontal" id="components">
          <fieldset>
            <div class="tab-content">

              <div class="tab-pane active" id="1">


<!-- Text start -->
<div class="control-group component" rel="popover" title="文本框控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
      <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
       <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='默认值'>
       <label class='control-label'>查询条件</label> 
                     	<input type='radio' value='1' name='textRadio'>是
                     	<input type='radio' value='0' checked=true name='textRadio'>否
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <!-- Text -->
  <label class="control-label leipiplugins-orgname">文本框</label>
  <div class="controls">
    <input name="leipiNewField" type="text" placeholder="默认值" title="文本框" value="" class="leipiplugins" leipiplugins="text"/>
  </div>

</div>
<!-- Text end -->


<!-- Textarea start -->           
<div class="control-group component" rel="popover" title="多行文本控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
      <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
      <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='必填项'>
      <label class='control-label'>查询条件</label> 
                     	<input type='radio' value='1' name='textAreaRadio'>是
                     	<input type='radio' value='0' checked=true name='textAreaRadio'>否
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <!-- Textarea -->
  <label class="control-label leipiplugins-orgname">多行文本</label>
  <div class="controls">
    <div class="textarea">
          <textarea title="多行文本" name="leipiNewField" class="leipiplugins" leipiplugins="textarea"/> </textarea>
    </div>
  </div>
</div>
<!-- Textarea end -->

<!-- Select start -->
<div class="control-group component" rel="popover" title="下拉控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
      <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='必填项'>
      <label class='control-label'>下拉选项</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一个选项</p>
     
       <label class='control-label'>查询条件</label> 
                     	<input type='radio' value='1' name='selectRadio'>是
                     	<input type='radio' value='0' checked=true name='selectRadio'>否
          <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <!-- Select -->
  <label class="control-label leipiplugins-orgname">下拉菜单</label>
  <div class="controls">
    <select name="leipiNewField" title="下拉菜单" class="leipiplugins" leipiplugins="select">
      <option>选项一</option>
      <option>选项二</option>
      <option>选项三</option>
    </select>
  </div>

</div>
<!-- Select end -->


<!-- Select start -->
<div class="control-group component" rel="popover" title="多选下拉控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
       <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='必填项'>
      <label class='control-label'>下拉选项</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一个选项</p>
       <label class='control-label'>查询条件</label> 
                     	<input type='radio' value='1' name='selectRadio'>是
                     	<input type='radio' value='0' checked=true name='selectRadio'>否
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <!-- Select -->
  <label class="control-label leipiplugins-orgname">下拉菜单</label>
  <div class="controls">
    <select multiple="multiple" name="leipiNewField" title="下拉菜单" class="leipiplugins" leipiplugins="select">
      <option>选项一</option>
      <option>选项二</option>
      <option>选项三</option>
      <option>选项四</option>
    </select>
  </div>

</div>
<!-- Select end -->


<!-- Multiple Checkboxes start -->
<div class="control-group component" rel="popover" title="复选控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
       <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='必填项'>
      <label class='control-label'>复选框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一个选项</p>
       <label class='control-label'>查询条件</label> 
                     	<input type='radio' value='1' name='checkRadio'>是
                     	<input type='radio' value='0' checked=true name='checkRadio'>否
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <label class="control-label leipiplugins-orgname">复选框</label>
  <div class="controls leipiplugins-orgvalue">
    <!-- Multiple Checkboxes -->
    <label class="checkbox inline">
      <input type="checkbox" name="leipiNewField" title="复选框" value="选项1" class="leipiplugins" leipiplugins="checkbox" orginline="inline">
      选项1
    </label>
    <label class="checkbox inline">
      <input type="checkbox" name="leipiNewField" title="复选框" value="选项2" class="leipiplugins" leipiplugins="checkbox" orginline="inline">
      选项2
    </label>
  </div>

</div>

<div class="control-group component" rel="popover" title="复选控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
       <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='必填项'>
      <label class='control-label'>复选框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一个选项</p>
      <label class='control-label'>查询条件</label> 
                     	<input type='radio' value='1' name='checkRadio'>是
                     	<input type='radio' value='0' checked=true name='checkRadio'>否
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <label class="control-label leipiplugins-orgname">复选框</label>
  <div class="controls leipiplugins-orgvalue">
    <!-- Multiple Checkboxes -->
    <label class="checkbox">
      <input type="checkbox" name="leipiNewField" title="复选框" value="选项1" class="leipiplugins" leipiplugins="checkbox">
      选项1
    </label>
    <label class="checkbox">
      <input type="checkbox" name="leipiNewField" title="复选框" value="选项2" class="leipiplugins" leipiplugins="checkbox">
      选项2
    </label>
  </div>
</div>
<!-- Multiple Checkboxes end -->

<!-- Multiple radios start -->
<div class="control-group component" rel="popover" title="单选控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
       <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='必填项'>
       
      <label class='control-label'>单选框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一个选项</p>
      <label class='control-label'>查询条件</label> 
                     	<input type='radio' value='1' name='radioRadio'>是
                     	<input type='radio' value='0' checked=true name='radioRadio'>否
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <label class="control-label leipiplugins-orgname">单选</label>
  <div class="controls leipiplugins-orgvalue">
    <!-- Multiple Checkboxes -->
    <label class="radio inline">
      <input type="radio" name="leipiNewField" title="单选框" value="选项1" class="leipiplugins" leipiplugins="radio" orginline="inline">
      选项1
    </label>
    <label class="radio inline">
      <input type="radio" name="leipiNewField" title="单选框" value="选项2" class="leipiplugins" leipiplugins="radio" orginline="inline">
      选项2
    </label>
  </div>
</div>

<div class="control-group component" rel="popover" title="单选控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
       <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='必填项'>
      <label class='control-label'>单选框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一个选项</p>
       <label class='control-label'>查询条件</label> 
                     	<input type='radio' value='1' name='radioRadio'>是
                     	<input type='radio' value='0' checked=true name='radioRadio'>否
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <label class="control-label leipiplugins-orgname">单选</label>
  <div class="controls leipiplugins-orgvalue">
    <!-- Multiple Checkboxes -->
    <label class="radio">
      <input type="radio" name="leipiNewField" title="单选框" value="选项1" class="leipiplugins" leipiplugins="radio">
      选项1
    </label>
    <label class="radio">
      <input type="radio" name="leipiNewField" title="单选框" value="选项2" class="leipiplugins" leipiplugins="radio">
      选项2
    </label>
  </div>
</div>
<!-- Multiple radios end -->


              </div>

              <div class="tab-pane" id="2">



                <div class="control-group component" rel="popover" title="文件上传" trigger="manual"
                  data-content="
                  <form class='form'>
                    <div class='controls'>
                      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
                       <label class='control-label'>字段名</label> <input type='text' id='columnvalue' placeholder='必填项'>
                      <hr/>
                      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
                    </div>
                  </form>"
                  >
                  <label class="control-label leipiplugins-orgname">文件上传</label>

                  <!-- File Upload -->
                  <div>
                    <input type="file" name="leipiNewField" title="文件上传" class="leipiplugins" leipiplugins="uploadfile">
                  </div>
                </div>


              </div>



              <div class="tab-pane" id="5">
                <textarea id="source" class="span6"></textarea>
              </div>

              
            </fieldset>
          </form>
        </div><!--tab-content-->
        </div><!---tabbable-->
      </div> <!-- row -->
      
    </div> <!-- /container -->

<script type="text/javascript" charset="utf-8" src="Public/js/jquery-1.7.2.min.js?2024"></script>
<script type="text/javascript"  src="Public/js/formbuild/bootstrap/js/bootstrap.min.js?2024"></script>
<script type="text/javascript" charset="utf-8" src="Public/js/formbuild/leipi.form.build.core.js?2024"></script>
<script type="text/javascript" charset="utf-8" src="Public/js/formbuild/leipi.form.build.plugins.js?2024"></script>
<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
<script type="text/javascript">
function submitFormInfo(){
	var basePath = "${pageContext.request.contextPath}";
	var table_en_name = $("#legend").find("input[type='hidden']").eq(0).val();
	var table_cn_name = $("#legend").find("input[type='hidden']").eq(0).attr('form_cn_name');
	var formArr = [];
	$("#target").find(".control-group").each(function(index){
		var json = {};
		if($(this).find("input[type=file]").eq(0).length > 0){
			json.name = $(this).find("label").text();
			json.type = "file";
			json.val = $(this).find("input[type=file]").eq(0).val();
			json.sort = index;
			json.column =  $(this).find("input[type=file]").eq(0).attr('columnvalue');
		}
		if($(this).find("input[type=text]").eq(0).length > 0){
			json.name = $(this).find("label").text();
			json.type = "text";
			json.val = $(this).find("input[type=text]").eq(0).val();
			json.sort = index;
			json.column =  $(this).find("input[type=text]").eq(0).attr('columnvalue');
			json.condition = $(this).find("input[type=text]").eq(0).attr('condition');
		}
		if($(this).find("textArea").length > 0){
		
			json.name = $(this).find("label").text();
			json.type = "textArea";
			json.val = $(this).find("textArea").eq(0).val().trim();
			json.sort = index;
			json.column = $(this).find("textArea").eq(0).attr('columnvalue');
			json.condition = $(this).find("textArea").eq(0).attr('condition');
		}
		if($(this).find("select").length > 0){
			var selectType = "";
			if($(this).find("select").eq(0).prop("multiple")){
				selectType = "select multiple";
			}else{
				selectType = "select";
			}
			var options = "";
			$(this).find("option").each(function(){
				options += $(this).text() + ",";
			});
			json.name = $(this).find("label").text();
			json.type = selectType;
			json.val = options;
			json.sort = index; 
			json.column =  $(this).find("select").eq(0).attr('columnvalue');
			json.condition = $(this).find("select").eq(0).attr('condition');
		}
		if($(this).find("input[type=checkbox]").length > 0){
			var val = "";
			var type = "checkbox";
			var mark = true;
			$(this).find("input[type=checkbox]").each(function(){
				val += $(this).val() + ",";
				if($(this).parent().is(".inline") && mark == true){
					type += " "+"inline";
					mark = false;
				}
			});
			json.name = $(this).find("input[type=checkbox]").eq(0).attr("title");
			json.type = type;
			json.val = val;
			json.sort = index; 
			json.column =  $(this).find(".leipiplugins-orgname").eq(0).attr('columnvalue');
			json.condition =$(this).find(".leipiplugins-orgname").eq(0).attr('condition');
		}
		if($(this).find("input[type=radio]").length > 0){
			var val = "";
			var type = "radio";
			var mark = true;
			$(this).find("input[type=radio]").each(function(){
				val += $(this).val() + ",";
				if($(this).parent().is(".inline") && mark == true){
					type += " "+"inline";
					mark = false;
				}
			});
			json.name = $(this).find("input[type=radio]").eq(0).attr("title");
			json.type = type;
			json.val = val;
			json.sort = index; 
			json.column =  $(this).find(".leipiplugins-orgname").eq(0).attr('columnvalue');
			json.condition =$(this).find(".leipiplugins-orgname").eq(0).attr('condition');
		}
		formArr[index] = json;
		 
	});
	
	if(table_en_name.trim() == '' ){
		alert("请填写表名称!");
		return;
	}
	if(table_cn_name.trim() == '' ){
		alert("请填写表名称!");
		return;
	}
	if(formArr.length <= 0){
		alert("请拖拽表单!");
		return;
	}
	var params = {
			"table_en_name":table_en_name,
			'table_cn_name': table_cn_name,
			"formData": JSON.stringify(formArr)
	}
	console.log(JSON.stringify(formArr));
	var url = "http://localhost:8080/DynamicForm/dynamicForm/dynamicFormAction.do?method=createTable";
 	 
	 $.post(url,params,function(){
		
	}); 
	
}
</script>

</body>
</html>